'use client'

import { Pencil, BarChart3, Activity, ClipboardList } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import FXCanvas from '@/components/effect/FXCanvas'

export default function DeckOverview() {
  const items = [
    {
      icon: <Pencil className="w-8 h-8 text-cyan-400" />,
      title: 'Recommendations',
      desc: 'Proceed, monitor or pass. Clear next-step recommendations with transparent rationale.'
    },
    {
      icon: <BarChart3 className="w-8 h-8 text-cyan-400" />,
      title: 'Outcome Modeling',
      desc: 'Probability-weighted return profiles. (e.g. $100–500M Exit 40%, $1B unicorn 15%)'
    },
    {
      icon: <Activity className="w-8 h-8 text-cyan-400" />,
      title: 'Market & Competitor Data',
      desc: 'Independently triangulated sizing and live positioning.'
    },
    {
      icon: <ClipboardList className="w-8 h-8 text-cyan-400" />,
      title: 'Suggested Diligence Items',
      desc: 'Actionable next questions for team, product, or market.'
    }
  ]

  return (
    <div className="relative min-h-[92svh] h-auto w-full overflow-hidden flex items-center justify-center">
      <div className="section-accent accent-3 absolute inset-0 z-0 h-full w-full"></div>

      <div className="fx h-full w-full">
        <FXCanvas effect="grid" />
      </div>

      <div className="inset-0 z-10 flex items-center justify-center">
        <div className="mx-auto">
          <div className="relative  text-gray-300 py-32 px-6 md:px-20 overflow-hidden">
            <div className="mx-auto max-w-6xl text-center mb-16">
              <h2 className="text-[44px] font-bold text-white leading-tight">
                Every deck gets a fair, data-backed first pass — <br />
                <span className="bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                  before anyone even opens it
                </span>
              </h2>
              <p className="mt-6 text-gray-400 text-[18px]">
                Confident decisions start with rigorous, reliable screening.
              </p>
            </div>

            <div className="mx-auto max-w-5xl flex flex-wrap justify-center gap-4">
              {items.map((f, i) => (
                <Card
                  key={i}
                  className="group relative overflow-hidden bg-[#101622]
      border-solid border-[#1f2533] rounded-[14px] p-[16px] 
      transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
      hover:-translate-y-[3px] hover:border-[#7C5CFF99] hover:border-2 hover:border-solid 
      w-full sm:w-[80%] md:w-[48%] lg:w-[48%]">
                  <CardContent className="flex flex-col items-start justify-center text-left p-[12px] space-y-4 h-full">
                    {/* 图标区 */}
                    <div
                      className="p-3 rounded-xl bg-gradient-to-br from-[#8b5cf6]/20 to-[#38bdf8]/20 
          transition-transform duration-300 ease-out group-hover:scale-110">
                      {f.icon}
                    </div>

                    <h3 className="text-lg font-semibold text-white transition-colors duration-300 group-hover:text-white">
                      {f.title}
                    </h3>

                    <p className="text-gray-400 text-sm leading-relaxed transition-colors duration-300 group-hover:text-gray-300">
                      {f.desc}
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
